<template>
  <div>
    <!-- 输入框 -->
    <el-input placeholder="请输入内容" v-model="input3">
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
    <!-- 按钮 -->
    <el-button type="primary" @click="addlist" class="add"
      >添加</el-button
    ><el-button type="warning" round>批量删除</el-button>
    <!-- 添加框 -->
    <from-menu
    ref="child"
      :addstatus="addstatus"
      :toplist="toplist"
      :editdata="editdata"
      :forbidden="forbidden"
    ></from-menu>
    <!-- 表格 -->
    <list-menu :toplist="toplist" @edit="edit"></list-menu>
  </div>
</template>

<script>
import fromMenu from "./components/form.vue"
import listMenu from "./components/list.vue"

export default {
  props: {},
  data() {
    return {
      input3:'', // 搜索框
      addstatus:{
        flag:false
      },//添加框状态
      toplist:[],
      editdata:{},
      forbidden:false,
    };
  },
  computed: {
  },
  created() {
    // 获取菜单列表
    this.$api.getmenulist({istree:true}).then((res)=>{
      this.toplist = res.data.list
    }).catch ((err)=>console.log(err)) 
    
  },
  mounted() {},
  watch: {},
  methods: {
    // 修改
    edit(obj) {
     this.forbidden = true
     this.addstatus.flag = true
     delete (obj.children)
     this.$refs.child.form =  JSON.parse(JSON.stringify(obj))
    },
    // 添加
    addlist(){
      this.addstatus.flag = true
      this.forbidden = false
    }
  },
  components: { fromMenu,listMenu}
};
</script>

<style scoped lang="scss">
::v-deep .el-input {
  width: 300px;
}
.add {
  margin: 0 10px;
}
</style>
